import {
    Dialog, // 导入 Dialog 组件
    DialogContent, // 导入 DialogContent 组件
    DialogDescription, // 导入 DialogDescription 组件
    DialogFooter, // 导入 DialogFooter 组件
    DialogHeader, // 导入 DialogHeader 组件
    DialogClose, // 导入 DialogClose 组件
    DialogTitle, // 导入 DialogTitle 组件
} from "@/components/ui/dialog"; // 从指定路径导入多个对话框组件

import { useRenameModal } from "@/store/use-rename-modal"; // 导入自定义的 useRenameModal 钩子
import { FormEventHandler, useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "../ui/button";
import { useApiMutation } from "@/hooks/use-api-mutation";
import { api } from "@/convex/_generated/api";
import { toast } from "sonner";

export const RenameModal = () => {
    const { mutate, pending } = useApiMutation(api.board.update);


    const { isOpen, onClose, initialValues } = useRenameModal(); // 使用 useRenameModal 钩子获取状态和方法
    const [title, setTitle] = useState(initialValues.title);
    useEffect(() => {
        setTitle(initialValues.title)
    }, [initialValues])

    const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
        e.preventDefault();

        mutate({
            id: initialValues.id,
            title,
        })
            .then(() => {
                toast.success("Board renamed");
                onClose();
            })
            .catch(() => {
                toast.error("Failed to rename board");
            });
    };

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            {/* Dialog 组件，用于显示模态框 */}
            <DialogContent>
                {/* DialogContent 组件，包含模态框的内容 */}
                <DialogHeader>
                    {/* DialogHeader 组件，包含模态框的头部 */}
                    <DialogTitle>Edit board title</DialogTitle>
                    {/* DialogTitle 组件，显示模态框的标题 */}
                </DialogHeader>
                <DialogDescription>
                    Enter a new title for this board.
                    {/* DialogDescription 组件，包含模态框的描述内容 */}
                    {/* 这里可以放置模态框的描述内容 */}
                </DialogDescription>
                <form onSubmit={onSubmit} className="space-y-4">
                    <Input
                        disabled={pending}
                        required
                        maxLength={60}
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                        placeholder="Board title"
                    />
                    <DialogFooter>
                        {/* DialogFooter 组件，包含模态框的底部内容 */}
                        <DialogClose asChild>
                            <Button type="button" variant="outline">
                                Cancel
                            </Button>
                        </DialogClose>
                        {/* DialogClose 组件，显示取消按钮 */}
                        <Button disabled={pending} type="submit">
                            Save
                        </Button>
                    </DialogFooter>
                </form>

            </DialogContent>
        </Dialog>
    );
};